<!--
 * @description  : 市管-添加特殊区域
 * @descriptionDetail: 市管-添加特殊区域
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-10-24 14:57:44
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->
    <view class="content">
      <view class="party-info-content">
        <view class="party-info-box">
          <view style="width: calc(100% - 30px);">
            <form-section title="基本信息"></form-section>
          </view>
          <u-form :model="dataForm" label-position="top" :rules="rules" :errorType="errorType" ref="uForm">
            <u-form-item label="区域名称" :required="isTrue" prop="areaName">
              <u-input placeholder="请输入名称" v-model="dataForm.areaName" />
            </u-form-item>
            <u-form-item label="区域类别" :required="isTrue" prop="typeName">
              <u-input :border="false" type="select" :select-open="typeShow" placeholder="请选择" v-model="dataForm.typeName" @click="typeShow = true"></u-input>
              <u-select mode="single-column" label-name="text" :list="typeList" v-model="typeShow" @confirm="selectTypeConfirm($event)"></u-select>
            </u-form-item>
            <u-form-item label="负责人" :required="isTrue" prop="manager">
              <u-input placeholder="请输入负责人" v-model="dataForm.manager" />
            </u-form-item>
            <u-form-item label="联系电话" :required="isTrue" prop="telephone">
              <u-input type="number" placeholder="请输入联系电话" v-model="dataForm.telephone" />
            </u-form-item>
            <u-form-item label="经纬度">
              <u-input placeholder="请选择" v-model="dataForm.lnglat" :disabled="true"></u-input>
              <u-icon name="map-fill" :color="$theme.u_type_primary" size="44" @click="setLocation()"></u-icon>
            </u-form-item>
            <u-form-item label="地址">
              <u-input placeholder="请输入地址" v-model="dataForm.address" />
            </u-form-item>
            <u-form-item label="状态">
              <dic-input
                :keyWord="$u.dic.DIC_KEYS.T_SYS_IS_ACTIVE"
                :dicCode="dataForm.isActive"
                type="select"
                :border="border"
                :select-open="dicSelectOpen($u.dic.DIC_KEYS.T_SYS_IS_ACTIVE)"
                placeholder="请选择"
                v-model="dataForm.isActiveName"
                @changeInputModelData="(name)=>{$set(dataForm, 'isActiveName', name)}"
                @click="showDic($u.dic.DIC_KEYS.T_SYS_IS_ACTIVE,dataForm.isActive)"
              />
            </u-form-item>
            <u-form-item label="排序号">
              <u-input type="number" placeholder="请输入排序号" v-model="dataForm.seq" />
            </u-form-item>
            <u-form-item label="区域情况描述">
              <u-input type="textarea" height="100" :auto-height="true" placeholder="请输入区域情况描述" v-model="dataForm.areaDesc" />
            </u-form-item>
            <view style="margin: 0px -16px;">
              <u-gap :height="$theme.cm_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
            </view>
            <view style="width: calc(100% - 30px);">
              <form-section title="照片信息"></form-section>
            </view>
            <u-form-item label="上传图片">
              <view class="zk-img-content">
                <m-upload
                  :deletable="true"
                  :maxCount="picIds"
                  width="150rpx"
                  height="150rpx"
                  :file-list="fileList"
                  :multiple="true"
                  index="fileList"
                  :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.m_special_area_attr}"
                  upApiUrl="uploadBase64ForApp"
                  ref="filePicUpload"
                  @on-list-change="changeUpload"
                >
                </m-upload>
              </view>
            </u-form-item>
          </u-form>
          <!-- 数据字典 -->
          <dic-choice :keyWord="dicKeyWords" :currentSelect="dicCurrentSelect" v-model="dicShow" @confirm="selectDicConfirm"></dic-choice>
        </view>
      </view>
      <view class="space-content"></view>
      <view class="submit-btns btn-other-cls">
        <u-button class="u-btn" type="primary" @click="saveBtn">
          保存
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import DicChoice from "@/components/dic_choice.vue";
import DicInput from "@/components/dic_input.vue";
import commonService from "@/service/common/common.service";
import mUpload from '@/components/m-upload.vue';
import FormSection from "@/components/form-section.vue";
import checkService from "@/service/check/check.service"
export default {
  components: {
    DicChoice,
    DicInput,
    mUpload,
    FormSection,
  },
  data() {
    return {
      dicShow: false, // dic_select 是否显示
      dicKeyWords: "", // dic 关键字
      dicCurrentSelect: "", // dic 当前选择项
      dataForm: {
        lnglat:"",
      }, 
      rules: {
        // 名称
        areaName: [
          {
            required: true,
            message: "请输入区域名称",
            trigger: ["change", "blur",],
          },
        ],
        typeName: [
          {
            required: true,
            message: "请选择区域类别",
            trigger: "change",
          },
        ],       
        manager:[
          {
            required: true,
            message: "请输入负责人",
            trigger: ["change", "blur",],
          },
        ],
        telephone:[
          {
            required: true,
            message: "请输入手机号码或座机号码",
            trigger: ["change", "blur",],
          },
          {
            validator: (rule, value) => {
              return !value || this.$u.test.mobile(value) || this.$u.test.tel(value);
            },
            message: '手机号码或座机号码不正确',
            trigger: ['change','blur',],
          },
        ],
      },
      errorType: ['border-bottom','message',],
      isTrue: true,
      border: false,
      fileList: [],
      picIds: '20',
      typeShow:false,
      typeList:[],
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  // 加载初始周期方法
  onLoad() {
    this.getAreaTypeList();
  },
  methods: {
    // 获取类型名称数据
    getAreaTypeList(){
      this.typeList = [];
      checkService.findAreaTypeList({isActive:1,}).then((rs) => {
        if(rs.success && rs.data.length > 0){
          rs.data.forEach((item) => {
            this.typeList.push({value:item.typeUuid,text:item.typeName,});
          });
        }
      }).catch((err) => {
        this.$u.toast(err);
      });
    },
    // 类型名称回调事件
    selectTypeConfirm(e){
      e.map((val, index) => {
        this.dataForm.typeUuid = val.value;
        this.dataForm.value = val.value;
        this.dataForm.typeName = val.label;
      });
    },
    // 数据字典组件选择事件
    dicSelectOpen: function(keyWords) {
      if (this.dicKeyWords == keyWords && this.dicShow) {
        return true;
      }
      return false;
    },
    showDic: function(key, cur) {
      if (this.dicShow) return;
      this.dicKeyWords = key;
      this.dicCurrentSelect = cur;
      this.dicShow = true;
    },
    selectDicConfirm(e) {
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.T_SYS_IS_ACTIVE) { // 状态
        this.dataForm.isActiveName = e[0].label;
        this.dataForm.isActive = e[0].extra.bcbCode;
      }
    },
    // 保存
    saveBtn() {
      let self = this;
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          let { ...params } = self.dataForm;
          let newList = [];
          if(this.fileList.length > 0){
            newList = this.fileList.map((item) => {
              return {gfiId:item.gfiId,};
            });
            params.fileList = newList;
          }
          checkService
            .saveOrUpdateArea(params)
            .then((res) => {
              if (res.success) {
                this.$u.toast(res.msg);
                this.backPrev({
                  paramKey: 'refresh',
                  param : true,
                });
              } else {
                this.$u.toast("保存失败");
              }
            })
            .catch((err) => {
              this.$u.toast(err);
            });
        } else {
          console.log("表单验证失败");
        }
      });
    },
    // 经纬度
    setLocation() {
      if (this.isDisabled) return;
      let self = this;
      // #ifdef H5-DINGDING
      this.$deviceApi
        .getLocationByMap(this.dataForm.latitude, this.dataForm.longitude)
        .then((latlng) => {
          self.$set(self.dataForm, "lnglat", `${latlng[1]},${latlng[0]}`);
          self.$set(self.dataForm, "longitude",latlng[1]);
          self.$set(self.dataForm, "latitude", latlng[0]);
        })
        .catch((err) => {
          self.$api.toast("获取位置信息失败");
        });
      // #endif

      // #ifndef H5-DINGDING
      this.$u.route("pages/commonPage/modifyLocationMap");
      // #endif
    },
    // 数据返回操作
    updateBackState(obj) {
      let self = this;
      // 经纬度
      if (obj.pos) {
        self.$set(self.dataForm, "lnglat", `${obj.pos.longitude},${obj.pos.latitude}`);
        self.$set(self.dataForm, "longitude", obj.pos.longitude);
        self.$set(self.dataForm, "latitude", obj.pos.latitude);
      }
    },
    // 上传/删除图片事件
    changeUpload(list, key) {
      if (list.length > 0) {
        this.fileList = [...list,];
      } else {
        this.fileList = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page{
	padding: 0;
}
.content {
  .party-info-content {
    padding: 10px 16px 16px;
  }
}
</style>
